﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>资源监测</title>
    <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/gis.css" />
    <link rel="stylesheet" type="text/css" href="css/layui.css" />
    <style>
    html,
    body {
         margin: 0;
                padding: 0;
                width: 100%;
                height: 100%;
            }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
    }
    #mapDiv {
        padding: 0;
        margin: 0;
        height: 100%;
    }

    .options-panel {
        font: 20px helvetica, sans-serif;
        background-color: #fff;
        position: absolute;
        right: 20px;
        top: 10px;
        padding: 10px;
        border: 1px solid #544F4F;
        z-index: 10000;
        text-align: center;
    }

    input[type="text"] {
        margin-bottom: 0;
    }

    li {
        line-height: 37px;
    }

    ul {
        margin: 0;
        list-style-type: none;
    }

    body .demo-class .layui-layer-content {
        background: #ffffff;
    }
    </style>
    <!-- <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=57f8889c991ed45face5f3869002651b"></script> -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript" src="echarts/echarts.js"></script>
    <script type="text/javascript" src="layui/layui.js"></script>
</head>

<body onLoad="onLoad()">
    <div class="layui-side" style="background-color: #081832;">
        <div class="layui-side-scroll">
            <ul class="layui-nav layui-nav-tree">
                
                <li class="layui-nav-item layui-this" >
                    <a href="javascript:;" id="sub21" onclick="sub21click()">产品点</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="sub22" onclick="sub22click()">测距</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="sub23" onclick="sub23click()">测面</a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" id="sub24" onclick="sub24click()">辐射范围</a>
                </li>
                
            </ul>
        </div>
    </div>
    <div style="position: fixed; left: 0px; right: 0; height: 100%">
        
        <iframe id="subhtml" src="./cpd.html" frameborder="no" scrolling="yes" allowtransparency="true" width="100%" height="100%"></iframe>
    </div>
    <script>
        var map;
        var center;
        var marker;
        var infoWin;
        var radius = 25000;
        function onLoad() {
        //初始化地图对象
        map = new T.Map("map", {datasourcesControl: true});
        //设置显示地图的中心点和级别
        map.centerAndZoom(new T.LngLat(119.65969, 38.69945), 8);
        //创建对象
        var ctrl = new T.Control.MapType();
        //添加控件
        map.addControl(ctrl);
        center = new T.LngLat(122.428477,39.200027);
        center2 = new T.LngLat(117.333602,38.37659);
        center3 = new T.LngLat(117.464971,38.382021);
        center4 = new T.LngLat(121.264857,38.854583);
        center5 = new T.LngLat(116.578594,38.091076);
        center6 = new T.LngLat(116.828539,38.580904);
        center7 = new T.LngLat(121.918949,39.629184);
        center8 = new T.LngLat(122.962795,39.751067);
        center9 = new T.LngLat(116.87,38.30);
            //创建信息窗口对象
            //创建信息窗口对象
            marker = new T.Marker(center);
            marker2 = new T.Marker(center2);// 创建标注
            marker3 = new T.Marker(center3);
            marker4 = new T.Marker(center4);
            marker5 = new T.Marker(center5);
            marker6 = new T.Marker(center6);
            marker7 = new T.Marker(center7);
            marker8 = new T.Marker(center8);
            marker9 = new T.Marker(center9);
            map.addOverLay(marker);
            map.addOverLay(marker2);
            map.addOverLay(marker3);
            map.addOverLay(marker4);
            map.addOverLay(marker5);
            map.addOverLay(marker6);
            map.addOverLay(marker7);
            map.addOverLay(marker8);
            map.addOverLay(marker9);

            var infoWin1 = new T.InfoWindow();
            var infoWin2 = new T.InfoWindow();
            var infoWin3 = new T.InfoWindow();
            var infoWin4 = new T.InfoWindow();
            var infoWin5 = new T.InfoWindow();
            var infoWin6 = new T.InfoWindow();
            var infoWin7 = new T.InfoWindow();
            var infoWin8 = new T.InfoWindow();
            var infoWin9 = new T.InfoWindow();
            var sContent =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/大连海产品.png' width='100' height='70' title='海产品'/>" +
                "<div style='margin:10px 0px 10px 120px;'>地址：<br>产品描述：大连海产品丰富多样，干海产品：海米、虾皮、干海参、干鲍鱼、各种鱼干(腌制)、各种鱼类、贝类、螃蟹" +
                "</div>" +
                "<input  id='keyWord' value='酒店' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent2 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/黄骅梭子蟹.png' width='100' height='70' title='梭子蟹'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：黄骅梭子蟹蟹肉洁白，肉多，肉质细嫩，膏似凝脂，味道2厘米左右，果实香甜，酥脆可口。" +
                "</div>" +
                "<input  id='keyWord' value='酒店' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent3 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/黄骅小麦粉.png' width='100' height='70' title='小麦粉'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：黄骅小麦粉中的蛋白质含量比其他谷物产品高，一般在11%以上，高的可达15%--20%。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent4 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/旅顺樱桃.png' width='100' height='70' title='樱桃'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：旅顺大樱桃历史悠久品种齐全，有70多个品种，色泽艳丽、光泽度好，风味独特，甜酸适口，维生素含量丰富。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent5 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/泊头鸭梨.png' width='100' height='70' title='鸭梨'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：泊头鸭梨是河北省沧州市的特产，泊头鸭梨果形俊秀，皮簿肉细，脆嫩多汁，香甜爽口。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent6 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/青县羊角脆.png' width='100' height='70' title='羊角脆'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：青县羊角脆，肉色淡绿，瓜瓤桔红色，极为美观。肉厚2厘米左右，果实香甜，酥脆可口。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent7 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/瓦房店苹果.png' width='100' height='70' title='苹果'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：瓦房店是“苹果之乡”，苹果品种繁多，包括国光、八月酥、迎秋等，瓦房店小国光苹果，香脆可口，极易储藏。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent8 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/庄河大骨鸡.png' width='100' height='70' title='大骨鸡'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：庄河大骨鸡鸡体大墩实，觅食力强，产蛋多而大，且蛋壳厚而坚实，肉质鲜嫩。" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
                var sContent9 =
                "<div style='margin:0px;'>" +
                "<div style='margin:10px 10px; '>" +
                "<img style='float:left;margin:0px 10px' src='./images/沧县金丝小枣.png' width='100' height='70' title='金丝小枣'/>" +
                "<div style='margin:10px 0px 10px 120px;'>电话 : (010)88187700 <br>地址：<br>产品描述：沧县金丝小枣一般为椭圆形和鹅卵形，核小皮薄，果肉丰满，肉质细腻，鲜枣鲜红色，肉质清脆；干果肉薄而坚韧" +
                "</div>" +
                "<input  id='keyWord' value='机场' type='text' style='border: 1px solid #cccccc;width: 180px;height: 20px;line-height: 20px;padding-left: 10px;display: block;float: left;'>" +
                "<input style='margin-left:195px;  width: 80px;height: 24px; text-align: center; background: #5596de;color: #FFF;border: none;display: block;cursor: pointer;' type='button' value='周边搜索'  onClick=\"localsearch.searchNearby(document.getElementById('keyWord').value,marker.getLngLat(),radius)\">" +
                "</div>" +
                "</div>";
            infoWin1.setContent(sContent);
            infoWin2.setContent(sContent2);
            infoWin3.setContent(sContent3);
            infoWin4.setContent(sContent4);
            infoWin5.setContent(sContent5);
            infoWin6.setContent(sContent6);
            infoWin7.setContent(sContent7);
            infoWin8.setContent(sContent8);
            infoWin9.setContent(sContent9);

            marker.addEventListener("click", function () {
                marker.openInfoWindow(infoWin1);
            })
            marker2.addEventListener("click", function () {
                marker2.openInfoWindow(infoWin2);
            })
            marker3.addEventListener("click", function () {
                marker3.openInfoWindow(infoWin3);
            })
            marker4.addEventListener("click", function () {
                marker4.openInfoWindow(infoWin4);
            })
            marker5.addEventListener("click", function () {
                marker5.openInfoWindow(infoWin5);
            })
            marker6.addEventListener("click", function () {
                marker6.openInfoWindow(infoWin6);
            })
            marker7.addEventListener("click", function () {
                marker7.openInfoWindow(infoWin7);
            })
            marker8.addEventListener("click", function () {
                marker8.openInfoWindow(infoWin8);
            })
            marker9.addEventListener("click", function () {
                marker9.openInfoWindow(infoWin9);
            });

            var config = {
                pageCapacity: 10,	//每页显示的数量
                onSearchComplete: localSearchResult	//接收数据的回调函数
            };
            //创建搜索对象
            localsearch = new T.LocalSearch(map, config);
        }

        function localSearchResult(result) {
            //清空地图及搜索列表
            clearAll();
            //创建圆
            createCircle();
            //解析点数据结果
            pois(result.getPois());
        }

        //解析点数据结果
        function pois(obj) {
            if (obj) {
                for (var i = 0; i < obj.length; i++) {
                    //闭包
                    (function (i) {
                        //名称
                        var name = obj[i].name;
                        //地址
                        var address = obj[i].address;
                        //坐标
                        var lnglatArr = obj[i].lonlat.split(" ");
                        var lnglat = new T.LngLat(lnglatArr[0], lnglatArr[1]);
                        var winHtml = "地址:" + address;
                        //创建标注对象
                        var marker = new T.Marker(lnglat);
                        //地图上添加标注点
                        map.addOverLay(marker);
                        //注册标注点的点击事件
                        marker.addEventListener("click", function () {
                            this.showPosition(marker, name, winHtml);
                        }, this);
                    })(i);
                }
            }
        }
        //圆形
        function createCircle() {
            var config = {
                color: "blue", //折线颜色
                fillColor: "#fff",    //填充颜色。当参数为空时，折线覆盖物将没有填充效果
                weight: "3", //折线的宽度，以像素为单位
                opacity: 0.5,    //折线的透明度，取值范围0 - 1
                fillOpacity: 0.4,
                lineStyle: "solid" //折线的样式，solid或dashed
            };
            //定义该矩形的显示区域
            var circle = new T.Circle(center, radius, config);
            map.addOverLay(circle);
        }
        //显示信息框
        function showPosition(marker, name, winHtml) {
            if (infoWin) {
                map.removeOverLay(infoWin);
                infoWin = null;
            }
            var html = "<h3>" + name + "</h3>";
            html += winHtml;
            infoWin = new T.InfoWindow(html);
            marker.openInfoWindow(infoWin);
        }

        //清空地图及搜索列表
        function clearAll() {
            map.clearOverLays();

        }
        



    </script>
    <script type="text/javascript">
        layui.use('element', function() {
            var element = layui.element;
        });
        function sub21click() {
           document.getElementById("subhtml").src="./cpd.html"
        };
        function sub22click() {
           document.getElementById("subhtml").src="./cj.html"
        };
        function sub23click() {
           document.getElementById("subhtml").src="./cm.html"
        };
        function sub24click() {
           document.getElementById("subhtml").src="./hy.html"
        };
      
    </script>
</body>

</html>